<template>
  <div>
    <div>
  <el-calendar>
    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
    <!--  slot = "dateCell"定义对象来控制单元格  slot-scope 把data 循环成date 就会循环生成p块在 p块click调用处理-->
    <template
      slot="dateCell"
      slot-scope="{date, data}">
      <p @click="setOrder(date)">
        {{ data.day.split('-').slice(1).join('-') }}
         <div class="content">{{dealMyDate(data.day)}}</div>
      <div style="position: absolute;width: 100%;height: 85px;z-index: 1;bottom: 0px;" @click="setOrder(date)"></div>
    </template>
  </el-calendar>
    </div>
  <addOrder v-if="addDialogIsShow" ref="showAddOrder"></addOrder>
  </div>
</template>

<script>
  import addOrder from '@/components/front/schedule/addOrder.vue'
    export default {
        name: "index",

      components : {
        addOrder
      },

        data() {
          return {
            resDate: [
              {"date":"2021-04-26","content":"放假"},
              {"date":"2021-04-27","content":"去交电费"},
              {"date":"2021-04-22","content":"去学习vue"}
            ],
                    addDialogIsShow: false
          }
        },
        methods:{
          dealMyDate(v) {
            //console.log(v)
            let len = this.resDate.length
            let res = ""
            for(let i=0; i<len; i++){
              if(this.resDate[i].date == v) {
                res = this.resDate[i].content
                break
              }
            }
            return res
          },
          setOrder:function(date){
             //alert(date);
            let _this = this;
            _this.addDialogIsShow = true;
            _this.$nextTick(() => {
              _this.$refs.showAddOrder.init(date);
            })
          }
        }

      }
</script>

<style  lang="stylus">
  .el-calendar-table
    .el-calendar-day
      position: relative

  .is-selected
    color: #f63a4c

</style>
